<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML>
<html>
  <head>
    <base href="<%=basePath%>">
    <title>ztree</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	
	<link rel="stylesheet" href="css/vivo.css">
	<link rel="stylesheet" href="js/bootstrap2/css/bootstrap.min.css">
	<link rel="stylesheet" href="js/bootstrap2/css/bootstrap-table.css">
	<link rel="stylesheet" href="css/common.css">
	<link rel="stylesheet" href="js/zTree_v3/css/metroStyle/metroStyle.css" >
	<script src="js/jquery-1.11.1.js"></script>
	
	<script src="js/layui-v2.1.5/layui/layui.all.js"></script>
	<script src="js/bootstrap2/js/bootstrap.min.js"></script>
	<script src="js/bootstrap2/js/bootstrap-table.js"></script>
	<script src="js/bootstrap2/js/bootstrap-table-zh-CN.js"></script>
	<script type="text/javascript" src="js/zTree_v3/js/jquery.ztree.core.min.js" ></script>
	<script type="text/javascript" src="js/zTree_v3/js/jquery.ztree.excheck.min.js" ></script>
	<script src="js/sharefunction.js"></script>
	<script type="text/javascript" src="js/layui-v2.1.5/layui/layui.all.js"></script> 
	<style type="text/css">
		.ztree-left {
		    float: left;
		    width: 23%;
		    left: 0;
		    top: 0;
		    bottom: 0;
		    height: 400px;
		    border-right: 1px solid #e5e5e5;
		    overflow-x: auto;
		    background-color: #f5f5f5;
		}
		.lay-right {
		    float: left;
		    width: 15%;
		    left: 0;
		    top: 0;
		    bottom: 0;
		    height: 400px;
		    border-right: 1px solid #e5e5e5;
		    overflow-x: auto;
		    background-color: #f5f5f5;
		    margin:0 0 0 25px;
		}
		ul{
			list-style:none
		}
		.panel_head{
			height:35px;
			background-color: #F08080;
			color:white;
			font-weight:bold;
			text-align:center;
			line-height:35px;
		}
		#table a{
			color: #f60;
    		text-decoration: none;
    		cursor:pointer;
		}
	</style>
	<script type="text/javascript">

		$(function(){
			myTree = $.fn.zTree.init($("#deptTree"), setting);
		})
		var setting = {
				data : {
					key : {
						name : "orgName"
					},
					simpleData : {
						enable : true,
						idKey : "id",
						pIdKey : "parentId"
					}
				},
				async : {
					enable : true,
					//otherParam: {"roleId":roleId},
					url : "admin/org/dept/getAllDeptList"
				},
				callback : {
					onClick : onClick
				}
			};
		var deptId;
		var opt;
		var keyword;
		function onClick(e, treeId, treeNode){
			deptId = treeNode.id;
			//刷新表格
			opt = {
			        query:{
			        	deptId:deptId
			        }
			    }; 
			$table.bootstrapTable('refresh', opt);
		}
		
		function doSearch(){
			keyword = $("#keyword").val();
			opt = {
			        query:{
			        	deptId:deptId,
			        	keyword : keyword
			        }
			    }; 
			$table.bootstrapTable('refresh', opt);
		}
	</script>
  </head>
	<body>
	<div id="main" class="main">
		<div id="tree" class="ztree-left">
			<div class="panel_head">层级信息</div>
			<ul id="deptTree" class="ztree" ></ul>
		</div>
		<div id="lay-middle" style="display:inline-block;width:70%;margin-left:25px;float:left;">
			<div style="height: 34px;"> 
				关键字：<input type="text" name="keyword" id="keyword" size="15">
				&nbsp; <a class='btn btn-danger radius my-btn' onClick=doSearch() >查 询</a>
			</div>
			<!-- 列表start -->
			<div style="padding-top: 15px;">
				<table id="table" >
				</table>
			</div>
			<!-- 列表end -->
		</div>
		<!-- 操作按钮 -->
		<!-- <div style="width:4%; float:left;margin:50px 25px 0 0;">
			<ul>
				<li class="list-group-item"><br>
				<button type="submit" class="btn btn-default" onClick="addSelectSingle()"><span class="icon-chevron-right"></span> </button><br><br>
				<button type="submit" class="btn btn-default" onClick="addGridAll()"> <span class="icon-backward"></span> </button><br><br>
				<button type="submit" class="btn btn-default" onClick="removeAll()"> <span class="icon-forward"></span>   </button><br><br>
				<button type="submit" class="btn btn-default" onClick="removeSingle()"><span class="icon-chevron-left"></span>  </button></li>
			</ul>
		</div>
		<div class="lay-right">
			<div class="panel_head">已选人员</div>
			<ul id="selList">
			</ul>
		</div> -->
	</div>
	<!-- <div style="width:100%;text-align:center; padding-top:20px;clear:both">
		<button class="btn btn-danger radius my-btn" onclick="isOk()" type="button">确定</button>
	</div> -->
	</body>
	<script type="text/javascript">
		//*****************************************************************************
		var optV = parent.optVal;//0：被审批人   1审批人
		//添加已选人员列表
		/* var selectList="";//已选人员列表
		var liList;
		function addSelectSingle(){
			var a = $table.bootstrapTable('getSelections'); 
			for(var i=0;i<a.length;i++){
				if(selectList.indexOf(a[i].userName)==-1){
					selectList=a[i].userName+","+selectList;
					liList = "<li><input type=\"checkbox\" name=\"fieldList\"/><span id=\""+a[i].userId+"\">"+a[i].userName+"</span></li>";
					$("#selList").append(liList);
				}
			}
		}
		//从已选择的列表中获取没有被选中的
		function removeSingle(){
			$("#selList").find('input:checkbox').each(function(){
				if($(this).is(':checked')){
					$(this).parent().remove();
					//已选人员列表中去除该值
					var uName = $(this).parent().find("span").html()+",";
					//replace需要重新赋值
					selectList = selectList.replace(uName,"");
				}
			});
		} */
		//确定选择，给父页面赋值
		function isOk(userId,userName){
			if(optV==0){
				parent.$("#userName").val(userName);
				parent.$("#userId").val(userId);
			}else{
				parent.$("#approvalUserName").val(userName);
				parent.$("#approvalUserid").val(userId);
			}
			closeLayer();
		}
		//关闭弹窗
		function closeLayer(){
			var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
			parent.layer.close(index);
		}
/* 		//拿到已选人员
		function initSelData(){
			var liArray = new Array();
			var liIdArray = new Array();
			if(optV==0){
				selectList = parent.$("#userName").val()+",";
				if(selectList!=""){
					liArray = selectList.split(',');
					liIdArray = parent.$("#userId").val().split(',');
				}
			}else{
				selectList = parent.$("#approvalUserName").val()+",";
				if(selectList!=""){
					liArray = selectList.split(',');
					liIdArray = parent.$("#approvalUserid").val().split(',');
				}
			}
			for(var i=0;i<liArray.length-1;i++){
				liList = "<li><input type=\"checkbox\" name=\"fieldList\"/><span id=\""+liIdArray[i]+"\">"+liArray[i]+"</span></li>";
				$("#selList").append(liList);
			}
		}
 */		//*********************************************************************
	</script>
	<script type="text/javascript">
		var $table;
		var selectionIds = [];  //保存选中ids  
		$(function(){
			//initSelData();
			//初始化表格,动态从服务器加载数据  
			$table = $("#table").bootstrapTable({
				method : "post", //使用get请求到服务器获取数据  
				url : "admin/org/user/findOrgUserList", //获取数据的Servlet地址  
				striped : true, //奇偶行渐色表   
				pagination : true, //启动分页  
				pageSize :5, //每页显示的记录数  
				pageNumber : 1, //当前第几页  
				pageList : [ 5, 10, 15, 20, 25 ], //记录数可选列表  
				sidePagination : "server", //表示服务端请求  
				contentType : 'application/x-www-form-urlencoded',
				//设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder  
				//设置为limit可以获取limit, offset, search, sort, order  
				queryParamsType : "undefined",
				queryParams : function queryParams(params) { //设置查询参数  
					var param = {
							pageNumber : params.pageNumber,
							pageSize : params.pageSize,
							orgId:"",
							keyword:keyword,
							deptId : deptId
					};
					return param;
				},
				columns : [ 
				  /* {
					//给多选框赋一个field值为“checkStatus”用于更改选择状态!!!!!  
					field: 'checkStatus',
					checkbox: true
					}, */  
				  {
					field : 'userName',
					title : '用户名称',
				}, {
					field : 'dept.orgName',
					title : '部门',
				} , {
					field : 'id',
					title : 'id',
				}, {
					field : 'userId',
					title : 'userId',
				}, {
					field : 'opr',
					title : '操作',
					width : '15%',
					formatter : 'actionFormatter'
				} ]
			});
			//隐藏id列
			$table.bootstrapTable('hideColumn', 'id');
			$table.bootstrapTable('hideColumn', 'userId');
		})
		//表格-操作 - 格式化 
		function actionFormatter(value, row, index) {
			return '<a onclick=isOk("'+row.userId+'","'+row.userName+'");>选择</a>&nbsp;&nbsp;' 
		}
	</script>
	
	
</html>